<template>
  <div class="dashboard-container">

   <!-- 总积分显示 -->
   <el-card :style="{ width: '15%' }" class="total-points-card">
      <div class="total-points">
        <span>总积分：</span>
        <span>{{ totalPoint }}</span>
      </div>
    </el-card>

    <!-- 右上角签到按钮 -->
    <div class="sign-in-button">

      <el-button type="primary" @click="handleSignIn">签到</el-button>
    </div>

  </div>
</template>

<script>
import Swal from 'sweetalert2'
import { mapGetters } from 'vuex'
import { sign, getPoint } from '@/api/user'
export default {
  name: 'Dashboard',
  data() {
    return {
      totalPoint: ""
    };
  },
  created() {
    this.fetchData();
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    fetchData() {
      getPoint().then((res) => {
        if (res.code == 200) {
          this.totalPoint = res.data
        } else {
          alert(res.msg);
        }
      })
        .catch((err) => alert(err));
    },
    handleSignIn() {
      sign().then((res) => {
        if (res.code == 200) {
          Swal.fire('签到成功', '', 'success');
          this.fetchData()
        } else {
          alert(res.msg);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  margin: 30px;
}

.sign-in-button {
  position: absolute;
  top: 10px;
  right: 10px;
}

.total-points-card {
  background-color: #409EFF; /* 设置卡片背景色为蓝色 */
  color: rgb(227, 203, 203); /* 设置字体颜色为红色 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.total-points {
  font-size: 18px;
  font-weight: bold;
}

</style>
